<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
	<title>客户信息管理</title>
<meta charset="UTF-8">

<link href="../../jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="../../jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="../../jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../../jquery/bs_pagination/jquery.bs_pagination.min.css">
	<script type="text/javascript" src="../../jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
	<script type="text/javascript" src="../../jquery/bs_pagination/en.js"></script>

<script type="text/javascript">

	$(function(){
		//定制字段
		$("#definedColumns > li").click(function(e) {
			//防止下拉菜单消失
	        e.stopPropagation();
	    });

		//对创建人下拉框赋值
		function getSysUserList(){
            $.ajax({

                url : "sysUser/getSysUserList",
                type : "get",
                dataType : "json",
                success : function (data) {

                    var html = "<option>${sessionScope.sysUser.userName}</option>";

                    //遍历出来的每一个n，就是每一个user对象
                    $.each(data,function (i,n) {
                        html += "<option value='"+n.userId+"'>"+n.userName+"</option>";
                    });

                    $("#create-custCreater").html(html);
                    $("#edit-custCreater").html(html);
                    $("#edit-custManagerName").html(html);
					$("#create-custManagerName").html(html);

                }

            });
		}
		getSysUserList();

        //为全选的复选框绑定事件，触发全选操作
        $("#qx").click(function () {

            $("input[name=xz]").prop("checked",this.checked);

        });

        $("#addBtn").click(function () {
                $("#createCustomerModal").modal("show");
        });

        //为保存按钮绑定事件，执行添加操作
        $("#saveBtn").click(function () {
            $.ajax({
                url : "customer/save",
                data : {
                    "custName" : $.trim($("#create-custName").val()),
                    "custRegion" : $.trim($("#create-custRegion").val()),
                    "custManagerName" : $.trim($("#create-custManagerName").val()),
                    "custCreater" : $.trim($("#create-custCreater").val()),
                    "custLevel" : $.trim($("#create-custLevel").val()),
                    "custLevelLabel" : $.trim($("#create-custLevelLabel").val()),
                    "custCredit" : $.trim($("#create-custCredit").val()),
                    "custAddr" : $.trim($("#create-custAddr").val()),
                    "custZip" : $.trim($("#create-custZip").val()),
                    "custTel" : $.trim($("#create-custTel").val()),
                    "custFax" : $.trim($("#create-custFax").val()),
                    "custWebsite" : $.trim($("#create-custWebsite").val()),
                    "custLicenceNo" : $.trim($("#create-custLicenceNo").val()),
                    "custChieftain" : $.trim($("#create-custChieftain").val()),
                    "custBankroll" : $.trim($("#create-custBankroll").val()),
                    "custTurnover" : $.trim($("#create-custTurnover").val()),
                    "custBank" : $.trim($("#create-custBank").val()),
                    "custBankAccount" : $.trim($("#create-custBankAccount").val()),
                    "custLocalTaxNo" : $.trim($("#create-custLocalTaxNo").val()),
                    "custNationalTaxNo" : $.trim($("#create-custNationalTaxNo").val())
				},
                type : "post",
                dataType : "json",
                success : function (data) {
                    if(data.success){
                        //保存客户成功之后，会进行一次页面刷新，刷新出保存的用户，根据创建时间来进行排序
                        pageList(1,$("#customerPage").bs_pagination('getOption', 'rowsPerPage'));
                        $("#customerAddForm")[0].reset();
                        //关闭添加操作的模态窗口
                        $("#createCustomerModal").modal("hide");
                    }else{
                        alert("添加客户失败");
                    }
                }
            })

        });

        //为修改按钮绑定事件，打开修改操作的模态窗口
        $("#editBtn").click(function () {
            var $xz = $("input[name=xz]:checked");
            if($xz.length==0){
                alert("请选择需要修改的记录");
            }else if($xz.length>1){
                $("#customerEditForm")[0].reset();
                //肯定只选了一条
            }else{
                var custNo = $xz.val();
                $.ajax({
                    url : "customer/getCustomerByCustNo/"+custNo,
                    type : "get",
                    dataType : "json",
                    success : function (data) {

                        //处理单条customer,并赋值给各标签
						if (data.success){
                            $("#edit-custNo").val(data.customer.custNo);
                            $("#edit-custName").val(data.customer.custName);
                            $("#edit-commonCreater").val(data.customer.custCreater);
                            $("#edit-custRegion").val(data.customer.custRegion);
                            $("#edit-custManagerName").val(data.customer.custManagerName);
                            $("#edit-custLevel").val(data.customer.custLevel);
                            $("#edit-custLevelLabel").val(data.customer.custLevelLabel);
                            $("#edit-custCredit").val(data.customer.custCredit);
                            $("#edit-custAddr").val(data.customer.custAddr);
                            $("#edit-custZip").val(data.customer.custZip);
                            $("#edit-custTel").val(data.customer.custTel);
                            $("#edit-custFax").val(data.customer.custFax);
                            $("#edit-custWebsite").val(data.customer.custWebsite);
                            $("#edit-custLicenceNo").val(data.customer.custLicenceNo);
                            $("#edit-custChieftain").val(data.customer.custChieftain);
                            $("#edit-custBankroll").val(data.customer.custBankroll);
                            $("#edit-custTurnover").val(data.customer.custTurnover);
                            $("#edit-custBank").val(data.customer.custBank);
                            $("#edit-custBankAccount").val(data.customer.custBankAccount);
                            $("#edit-custLocalTaxNo").val(data.customer.custLocalTaxNo);
                            $("#edit-custNationalTaxNo").val(data.customer.custNationalTaxNo);

                            //所有的值都填写好之后，打开修改操作的模态窗口
                            $("#editCustomerModal").modal("show");
						}else {
                            $("#customerEditForm")[0].reset();
                            $("#editCustomerModal").modal("hide");
						}

                    }
                })
            }
        });

        $("#updateBtn").click(function () {

            $.ajax({

                url : "customer/update",
                data : {
                    "custNo" : $.trim($("#edit-custNo").val()),
                    "custName" : $.trim($("#edit-custName").val()),
                    "custRegion" : $.trim($("#edit-custRegion").val()),
                    "custManagerName" : $.trim($("#edit-custManagerName").val()),
                    "custCreater" : $.trim($("#edit-custCreater").val()),
					"commonCreater" : $.trim($("#edit-commonCreater").val()),
                    "custLevel" : $.trim($("#edit-custLevel").val()),
                    "custLevelLabel" : $.trim($("#edit-custLevelLabel").val()),
                    "custCredit" : $.trim($("#edit-custCredit").val()),
                    "custAddr" : $.trim($("#edit-custAddr").val()),
                    "custZip" : $.trim($("#edit-custZip").val()),
                    "custTel" : $.trim($("#edit-custTel").val()),
                    "custFax" : $.trim($("#edit-custFax").val()),
                    "custWebsite" : $.trim($("#edit-custWebsite").val()),
                    "custLicenceNo" : $.trim($("#edit-custLicenceNo").val()),
                    "custChieftain" : $.trim($("#edit-custChieftain").val()),
                    "custBankroll" : $.trim($("#edit-custBankroll").val()),
                    "custTurnover" : $.trim($("#edit-custTurnover").val()),
                    "custBank" : $.trim($("#edit-custBank").val()),
                    "custBankAccount" : $.trim($("#edit-custBankAccount").val()),
                    "custLocalTaxNo" : $.trim($("#edit-custLocalTaxNo").val()),
                    "custNationalTaxNo" : $.trim($("#edit-custNationalTaxNo").val())
                },
                type : "post",
                dataType : "json",
                success : function (data) {
                    if(data.success){
                        /*
                            修改操作后，应该维持在当前页，维持每页展现的记录数
                         */
                        pageList($("#customerPage").bs_pagination('getOption', 'currentPage')
                            ,$("#customerPage").bs_pagination('getOption', 'rowsPerPage'));
                        $("#customerEditForm")[0].reset();
                        //关闭修改操作的模态窗口
                        $("#editActivityModal").modal("hide");
                    }else{
                        alert("修改市场活动失败");
                    }
                }
            })
        });

         //为删除按钮绑定事件，执行市场活动删除操作
        $("#deleteBtn").click(function () {
            //找到复选框中所有挑√的复选框的jquery对象
            var $xz = $("input[name=xz]:checked");
            if($xz.length==0){
                alert("请选择需要删除的记录");
                //肯定选了，而且有可能是1条，有可能是多条
            }else{
                if(confirm("确定删除所选中的记录吗？")){
                    var param = "";
                    //将$xz中的每一个dom对象遍历出来，取其value值，就相当于取得了需要删除的记录的id
                    for(var i=0;i<$xz.length;i++){
                        param += "custNo="+$($xz[i]).val();
                        //如果不是最后一个元素，需要在后面追加一个&符
                        if(i<$xz.length-1){
                            param += "&";
                        }
                    }
                    $.ajax({
                        url : "customer/delete",
                        data : param,
                        type : "post",
                        dataType : "json",
                        success : function (data) {
                            if(data.success){
                                //删除客户成功之后，会进行一次页面刷新，刷新出保存的用户，根据创建时间来进行排序
                                pageList(1,$("#customerPage").bs_pagination('getOption', 'rowsPerPage'));
                            }else{
                                alert("删除市场活动失败");
                            }
                        }
                    })
                }
            }
        });

        //为查询按钮绑定事件，触发pageList方法
        $("#searchBtn").click(function () {
            $("#hidden-name").val($.trim($("#search-name").val()));
            var name = $("#search-name").val();
            pageList(1,2);
        });


        $("#activityBody").on("click",$("input[name=xz]"),function () {

            $("#qx").prop("checked",$("input[name=xz]").length==$("input[name=xz]:checked").length);

        });

        //进入客户管理页面，我们需要进行一次分页查询
        pageList(1,2);

        //用来处理分页请求
        function pageList(pageNo,pageSize) {

            //将全选的复选框的√干掉
            $("#qx").prop("checked",false);

            //查询前，将隐藏域中保存的信息取出来，重新赋予到搜索框中
            $("#search-name").val($.trim($("#hidden-name").val()));
            $.ajax({

                    url: "customer/"+pageNo+"/"+pageSize+"/"+$.trim($("#search-name").val()),
                    type: "get",
                    dataType: "json",
                    success: function (data) {

                        var html = "";

                        //每一个n就是每一个市场活动对象
                        $.each(data.dataList, function (i, n) {

                            if (n.custAddr == null && n.custWebsite == null){
                                html += '<tr class="active">';
                                html += '<td><input type="checkbox" name="xz" value="'+n.custNo+'"/></td>';
                                html += '<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'workbench/activity/detail.do?id='+n.custNo+'\';">'+n.custName+'</a></td>';
                                html += '<td>'+n.custTel+'</td>';
                                html += '<td>暂无</td>';
                                html += '<td>暂无</td>';
                                html += '</tr>';
                            }else {
								html += '<tr class="active">';
								html += '<td><input type="checkbox" name="xz" value="'+n.custNo+'"/></td>';
								html += '<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'workbench/activity/detail.do?id='+n.custNo+'\';">'+n.custName+'</a></td>';
								html += '<td>'+n.custTel+'</td>';
								html += '<td>'+n.custAddr+'</td>';
								html += '<td>'+n.custWebsite+'</td>';
								html += '</tr>';
                            }


                        });
                        $("#customerBody").html(html);
                        //计算总页数
                        var totalPages = data.total%pageSize==0?data.total/pageSize:parseInt(data.total/pageSize)+1;
                        //数据处理完毕后，结合分页查询，对前端展现分页信息
                        $("#customerPage").bs_pagination({
                            currentPage: pageNo, // 页码
                            rowsPerPage: pageSize, // 每页显示的记录条数
                            maxRowsPerPage: 20, // 每页最多显示的记录条数
                            totalPages: totalPages, // 总页数
                            totalRows: data.total, // 总记录条数

                            visiblePageLinks: 3, // 显示几个卡片

                            showGoToPage: true,
                            showRowsPerPage: true,
                            showRowsInfo: true,
                            showRowsDefaultInfo: true,

                            //该回调函数时在，点击分页组件的时候触发的
                            onChangePage: function (event, data) {
                                pageList(data.currentPage, data.rowsPerPage);
                            }
                        });

                    }
                }
            )}

        });





	
</script>
</head>
<body>
    <%--根据用户名查询用户隐藏域--%>
    <input type="hidden" id="hidden-name"/>


	<!-- 修改客户的模态窗口 -->
	<div class="modal fade" id="editCustomerModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">修改客户</h4>
				</div>
				<div class="modal-body">
					<form id="customerEditForm" class="form-horizontal" role="form">
						<input type="hidden" id="edit-custNo"/>
						<div class="form-group">
							<label for="edit-custCreater" class="col-sm-2 control-label">新创建人<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-custCreater">
									<%--这里的创建人就是现在登录的用户--%>

								</select>
							</div>
							<label for="edit-commonCreater" class="col-sm-2 control-label">原创建人<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-commonCreater" disabled>
							</div>
							<label for="edit-custRegion" class="col-sm-2 control-label">地区<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-custRegion">
							</div>
						</div>

						<div class="form-group">
							<label for="edit-custManagerName" class="col-sm-2 control-label">接手人(客户经理/主管)</label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-custManagerName">
									<%--这里的创建人就是现在登录的用户--%>

								</select>
							</div>
							<label for="edit-custName" class="col-sm-2 control-label">客户名称</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-custName" disabled>
							</div>
						</div>

						<div class="form-group">
							<label for="edit-custLevel" class="col-sm-2 control-label">客户等级</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-custLevel">
							</div>
							<label for="edit-custLevelLabel" class="col-sm-2 control-label">客户等级（描述）</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-custLevelLabel">
							</div>
							<label for="edit-custCredit" class="col-sm-2 control-label">客户信用度</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-custCredit">
							</div>
							<label for="edit-custAddr" class="col-sm-2 control-label">地址</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-custAddr">
							</div>
							<label for="edit-custZip" class="col-sm-2 control-label">邮政编码</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-custZip">
							</div>
							<label for="edit-custTel" class="col-sm-2 control-label">电话</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-custTel">
							</div>
							<label for="edit-custFax" class="col-sm-2 control-label">传真</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-custFax">
							</div>
							<label for="edit-custWebsite" class="col-sm-2 control-label">网址</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-custWebsite">
							</div>
							<label for="edit-custLicenceNo" class="col-sm-2 control-label">营业执照注册号</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-custLicenceNo">
							</div>
							<label for="edit-custChieftain" class="col-sm-2 control-label">法人</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-custChieftain">
							</div>
							<label for="edit-custBankroll" class="col-sm-2 control-label">注册资金</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-custBankroll">
							</div>
							<label for="edit-custTurnover" class="col-sm-2 control-label">年营业额</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-custTurnover">
							</div>
							<label for="edit-custBank" class="col-sm-2 control-label">开户银行</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-custBank">
							</div>
							<label for="edit-custBankAccount" class="col-sm-2 control-label">银行账号</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-custBankAccount">
							</div>
							<label for="edit-custLocalTaxNo" class="col-sm-2 control-label">地税登记号</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-custLocalTaxNo">
							</div>
							<label for="edit-custNationalTaxNo" class="col-sm-2 control-label">国税登记号</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-custNationalTaxNo">
							</div>
						</div>
					</form>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" id="updateBtn">更新</button>
				</div>
			</div>
		</div>
	</div>



	<!-- 创建客户的模态窗口 -->
	<div class="modal fade" id="createCustomerModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建客户</h4>
				</div>
				<div class="modal-body">
					<form id="customerAddForm" class="form-horizontal" role="form">
					
						<div class="form-group">
							<label for="create-custCreater" class="col-sm-2 control-label">创建人<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-custCreater">
									<%--这里的创建人就是现在登录的用户--%>

								</select>
							</div>
						</div>
						
						<div class="form-group">
							<%--第一次填写必填信息--%>
							<label for="create-custName" class="col-sm-2 control-label">客户名称<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-custName" value="待填充">
							</div>
							<label for="create-custTel" class="col-sm-2 control-label">电话<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-custTel" value="待填充">
							</div>
							<label for="create-custRegion" class="col-sm-2 control-label">地区<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-custRegion" value="待填充">
							</div>
							<label for="create-custWebsite" class="col-sm-2 control-label">网址<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-custWebsite" value="待填充">
							</div>
							<%---------------------------------------------------%>
						</div>

						<div class="form-group">

							<label for="create-custManagerName" class="col-sm-2 control-label">接手人(客户经理/主管)</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-custManagerName">
							</div>
							<label for="create-custLevel" class="col-sm-2 control-label">客户等级</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-custLevel">
							</div>
							<label for="create-custLevelLabel" class="col-sm-2 control-label">客户等级（描述）</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-custLevelLabel">
							</div>
							<label for="create-custCredit" class="col-sm-2 control-label">客户信用度</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-custCredit">
							</div>
							<label for="create-custAddr" class="col-sm-2 control-label">地址</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-custAddr">
							</div>
							<label for="create-custZip" class="col-sm-2 control-label">邮政编码</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-custZip">
							</div>
							<label for="create-custFax" class="col-sm-2 control-label">传真</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-custFax">
							</div>
							<label for="create-custLicenceNo" class="col-sm-2 control-label">营业执照注册号</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-custLicenceNo">
							</div>
							<label for="create-custChieftain" class="col-sm-2 control-label">法人</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-custChieftain">
							</div>
							<label for="create-custBankroll" class="col-sm-2 control-label">注册资金</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-custBankroll">
							</div>
							<label for="create-custTurnover" class="col-sm-2 control-label">年营业额</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-custTurnover">
							</div>
							<label for="create-custBank" class="col-sm-2 control-label">开户银行</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-custBank">
							</div>
							<label for="create-custBankAccount" class="col-sm-2 control-label">银行账号</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-custBankAccount">
							</div>
							<label for="create-custLocalTaxNo" class="col-sm-2 control-label">地税登记号</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-custLocalTaxNo">
							</div>
							<label for="create-custNationalTaxNo" class="col-sm-2 control-label">国税登记号</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="create-custNationalTaxNo">
							</div>
						</div>
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" data-dismiss="modal" id="saveBtn">保存</button>
				</div>
			</div>
		</div>
	</div>
	

	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>客户信息管理列表</h3>
			</div>
		</div>
	</div>
	
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
	
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">客户名称</div>
				      <input class="form-control" type="text" id="search-name">
				    </div>
				  </div>

				  <button type="submit" class="btn btn-default" id="searchBtn">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
				  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createCustomerModal"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" data-toggle="modal"  id="editBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <shiro:hasPermission name="user:delete">
				  <button type="button" class="btn btn-danger"  id="deleteBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				  </shiro:hasPermission>
				</div>
				
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="qx" /></td>
							<td>客户名称</td>
							<td>客户电话</td>
							<td>地址</td>
							<td>网址</td>
						</tr>
					</thead>
					<tbody id="customerBody">

					</tbody>
				</table>
			</div>
			
			<div style="height: 50px; position: relative;top: 30px;">
				<div id="customerPage"></div>
			</div>

		</div>
		
	</div>
</body>
</html>